import React from 'react';
import moment from 'dayjs'
import { View, Text } from '@tarojs/components'
import { useState, useEffect } from 'react';
const CountdownTimer = (props) => {
  const { time, onShare } = props

  const getSeconds = (s) => {
    let second = parseInt(s); // 秒
    let minute = 0;
    let house = 0;
    let date = 0;
    if (second > 60) {
      //如果秒数大于60，将秒数转换成整数
      //获取分钟，除以60取整数，得到整数分钟
      minute = parseInt(second / 60);
      //获取秒数，秒数取佘，得到整数秒数
      second = parseInt(second % 60);
      //秒数
      if (minute > 60) {
        //获取小时，获取分钟除以60，得到整数小时
        house = parseInt(minute / 60);
        //获取小时后取佘的分，获取分钟除以60取佘的分
        minute = parseInt(minute % 60);
      }
      if (house > 24) {
        //获取小时，获取分钟除以24，得到整数小时
        date = parseInt(house / 24);
        //获取小时后取佘的分，获取分钟除以60取佘的分
        house = parseInt(house % 24);
      }
    }
    if (s < 0) {
      return <View className='liveInteraction_live_starlive'>直播即将开始，请耐心等待</View>;
    } else {
      // 渲染倒计时
      return (
        <View className='liveInteraction_live_starContent'>
          <View className='liveInteraction_live_startTitle'>距离开播还剩</View>
          <View className='liveInteraction_live_startTime'>
            {date ? <>
              <View className='liveInteraction_live_startTimeBox'>{date}</View>
              <View className='liveInteraction_live_startTimeSize'>天</View>
            </> : null}
            {house ? <>
              <View className='liveInteraction_live_startTimeBox'>{house}</View>
              <View className='liveInteraction_live_startTimeSize'>时</View>
            </> : null}
            {minute ? <>
              <View className='liveInteraction_live_startTimeBox'>{minute}</View>
              <View className='liveInteraction_live_startTimeSize'>分</View>
            </> : null}
            <>
              <View className='liveInteraction_live_startTimeBox'>{second ? second : 0}</View>
              <View className='liveInteraction_live_startTimeSize'>秒</View>
            </>
          </View>
          <View className='liveInteraction_live_btn' onClick={() => onShare()}>去分享</View>
        </View>

      );
    }
  };
  let times =
    parseInt(new Date(time.replace(/-/g, '/')).getTime() / 1000) - parseInt(new Date().getTime() / 1000)

  const [interVal, setIntervals] = useState(0);
  const [renderStatus, setRenderStatus] = useState(false)
  // 自定义渲染倒计时组件的方法
  let i = 0;
  useEffect(() => {
    let controller = true;
    let setTime;
    setTime = setInterval(() => {
      i++;
      setIntervals(times - i);
      if (times - i >= 0 || controller === false) {

      }
      else {
        clearInterval(setTime);

      }
    }, 1000);
    return () => {
      controller = false;
      clearInterval(setTime);
    };
  }, []);

  return (
    getSeconds(interVal)
  );
};

export default CountdownTimer;